import React from 'react';
import { YunxiaoIcon } from '@alife/devops-ui';
import { Button } from '@teamix/ui';
import intl from '../../locale';

export default class Content extends React.Component {
  state = {
    isShowMore: false,
  };

  render() {
    const { content } = this.props;
    const { isShowMore } = this.state;
    const contentArr = content ? content.split('\n') : [];
    const curArr = isShowMore ? contentArr : contentArr.slice(0, 1);
    return (
      <React.Fragment>
        {curArr.map((item, index) => {
          return (
            <div className="content-detail-item">
              <span>{item}</span>
              {index === curArr.length - 1 && contentArr.length > 1 && (
                <div style={{ marginTop: 8 }}>
                  <Button
                    text
                    onClick={() => {
                      this.setState({
                        isShowMore: !isShowMore,
                      });
                    }}
                    type="primary"
                    size="small"
                  >
                    {isShowMore
                      ? intl.get({
                          id: 'code-assets.components.dependencyIssueDetailDialog.content.PutAway',
                          defaultMessage: '收起',
                        })
                      : intl.get({
                          id: 'code-assets.components.dependencyIssueDetailDialog.content.ExpandMore',
                          defaultMessage: '展开更多',
                        })}
                    <YunxiaoIcon
                      style={{ marginLeft: 4 }}
                      type={`arrow-${isShowMore ? 'up' : 'down'}-2-line`}
                    />
                  </Button>
                </div>
              )}
            </div>
          );
        })}
      </React.Fragment>
    );
  }
}
